import React, { Component } from 'react';
import { observer, inject } from "mobx-react";
import { InputNumber } from 'antd';

@inject('rootStore') @observer
class CategoryTable extends Component {
  render() {
    return (
      <div className="list-table integration-table mt0">
      {
        this.props.categoryCheckedList && this.props.categoryCheckedList.length !== 0 ?
        <span>
          <ul className="table-header">
            <li className="header-item">Category</li>
            <li className="header-item">Integral</li>
            <li className="header-item">Category</li>
            <li className="header-item">Integral</li>
            <li className="header-item">Category</li>
            <li className="header-item">Integral</li>
          </ul>
          <div className="category-table-container">
            {
              this.props.categoryCheckedList.map((item, index) => {
                return (
                  <ul className="table-container" key={index}>
                    <li className="container-item name">{item.name}</li>
                    <li className="container-item integration">
                      <InputNumber
                        value={item.integral}
                        min={0}
                        max={100}
                        precision={0}
                        onChange={(value) => this.props.integrationOnChange(value, index)} />
                    </li>
                  </ul>
                )
              })
            }
          </div>
        </span>
        :
        null
      }
      </div>
    )
  }
}

export default CategoryTable;
